<template>
  <!-- 发货 -->
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="480px"
    :close-on-click-modal="false"
    :before-close="handleChange"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="快递公司" prop="code">
        <el-select v-model="form.code" placeholder="请选择">
          <el-option v-for="item in option" :key="item" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="快递单号" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleChange">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { expressCode } from "@/api/mode";
import { key } from "@/store";

@Options({
  props: {
    orderID: {
      // 订单ID
      type: String,
      default: "",
    },
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogExpress extends Vue {
  [x: string]: any;
  data() {
    return {
      dialogVisible: this.isVisible,
      title: "发货",
      form: {
        code: "",
        number: "",
      },
      rules: {
        code: [{ required: true, message: "不能为空", trigger: "change" }],
        number: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      option: [], // 快递公司数组
    };
  }

  created() {
    this.init();
  }

  init() {
    let nd: Array<any> = [];
    for (let key in expressCode) {
      nd.push({
        value: key,
        label: expressCode[key],
      });
    }
    this.option = nd;
  }

  // 确定
  submit() {
    let el: any = this.$refs["form"];
    el.validate((valid: Boolean) => {
      if (valid) {
        let nd = {
          orderID: this.orderID,
          courierCode: this.form.code,
          courierNumber: this.form.number,
          courierName: expressCode[this.form.code],
        };
        this.API.postExpress(nd).then(() => {
          this.$emit("callBack");
          this.handleChange();
        });
      }
    });
  }

  handleChange() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>

<style lang="scss" scoped>
</style>